import { useParams,useMatch,useSearchParams } from 'react-router-dom'

const List = () => {
  const params = useParams();
  const [searchParams] = useSearchParams();  
  const id = searchParams.get('id');  
  const match = useMatch('/list/:id');

  // 列表数据
  const people = [
    {
      id:1,
      name:"水浒传"
    },
    {
      id:2,
      name:"三国演义"
    }
  ];

  const listItems = people.map(person => <li key={person.id}>{person.name}</li>);

 
  return (
    <div>
      <h1>User ID: {params.id}</h1>
      <div>User ID: {match?.params.id}</div>
      <div>{id}</div>

      列表
      <ul>{listItems}</ul>
    </div>
  );
};
export default List;
